<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>添加商品</title>
<script>
    function jiaxiang(wang){
        window.location.href=wang;
    }
</script>
</head>
<style>
.p1{
    height: 6%;
   width: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   border-bottom: 1px solid #e4e4ff;
  }
  .p2{
    height: 100%;
   width: 20%;
   position: absolute;
   left: 0px;
   top: 0px; 
  }
  .read{
    font-size: 16px;
    position: absolute;
    height: 70%;
    width: 80%;
    top: 6px;
    left: 40px;
    font-weight: bold;
}
  .p3{
     width: 60%;
     height: 100%;
     position: absolute;
     top:10%;
     left:20%;  
     border: 1px solid #e4e4ff;
     border-radius: 5px;

  }
  .p4{
    width: 50%;
     height: 5%;
     position: absolute;
     top:15%;
     left:25%;  
     }
     .p5{
    width: 50%;
     height: 5%;
     position: absolute;
     top:22%;
     left:25%;  
     }
     .p6{
    width: 30%;
     height: 5%;
     position: absolute;
     top:29%;
     left:25%;  
     }
     .yg{
        width: 65%;
         height: 100%;
         position: relative;
        left:35%;
        top:12%;
     }
     .yg1{
         width: 50%;
         height: 100%;
         position: relative;
         float:left;
     }
     .yg2{
         width: 50%;
         height: 100%;
         position: relative;
         float:right;
     }
     .switch1{
         width: 60%;
         height: 100%;
         position: relative;
         float: right;
     }
     .switch2{
        position: absolute;
        left:20%;
        top:12%;
     }
     .p7{
     width: 50%;
     height: 5%;
     position: absolute;
     top:36%;
     left:25%;   
     }
     .p8{
     width: 50%;
     height: 5%;
     position: absolute;
     top:43%;
     left:25%;  
     }
     .p9{
     width: 50%;
     height: 5%;
     position: absolute;
     top:50%;
     left:25%;  
     }
     .p10{
     width: 50%;
     height: 5%;
     position: absolute;
     top:57%;
     left:25%;  
     }
     .p11{
     width: 50%;
     height: 5%;
     position: absolute;
     top:64%;
     left:25%;  
     }
     .p12{
     width: 50%;
     height: 5%;
     position: absolute;
     top:71%;
     left:25%;  
     }
  .s4{
      font-size: 20px;
      color: lightslategray;
      position: absolute; 
      top: 5%;
      left: 10%;
  }
 .s5{
     position: absolute; 
     top: 5px;
     left: 10px;
     font-size: 14px;
 
 }

 

 .t1{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #e4e4ff;
    outline: none;
  }
  .t2{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #e4e4ff;
    outline: none;
  }
 .t3{
     width: 70%;
     height: 70%;
     position: absolute;
     top:5%;
     left: 20%;
     border-radius: 5px;
    border: 1px solid #e4e4ff;
    outline: none;
  }
  .cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

 input.cmn-toggle-round + label {
  padding: 1px;
  width: 40px;
  height: 20px;
  background-color: #dddddd;
  border-radius: 20px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 20px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 20px;
}

.b1 {
    -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 4px 8px;
 text-align: center;
 background-color: #7D7DFF;
 color: white;
 border: 0px solid #7D7DFF;
 border-radius:4px;
 position: absolute;
 top:85%;
 left:40%;
 width: 150px;
 }
 .b1:hover {
 background-color: #b7b7f8;
 color: white;
 }
 
</style>
</head>


<body>
    <div class="p1">
        <div class="p2">
            <span class="read">首页 <span style="color: #ADADAD;">/</span> 商品 <span style="color: #ADADAD;">/</span> <span style="color: #ADADAD;font-weight: 200;font-size: 13px;">添加商品</span></span>
        </div>
     </div>
     <div class="p3">
        <span class="s4">②填写商品促销</span>
            <div class="p4">
                <span class="s5">赠送积分：</span>
                <input type="text" class="t1" value=""/> 
            </div>
            <div class="p5">
                <span class="s5">赠送成长值：</span>
                <input type="text" class="t2" value=""/> 
            </div>
            <div class="p6">
                <span class="s5">商品推荐：</span>
            <div class="yg">
               <div class= "yg1">
                <span class="s6">新品</span>
                <div class="switch1">
                    <div class="switch">
                    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-1"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-4"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
               </div>
               <div class="yg2">
                <span class="s6">推荐</span>
                <div class="switch1">
                    <div class="switch">
                    <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-2"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-5"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-6" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-6" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
               </div>
            </div>
            </div>
            <div class="p7">
                <span class="s5">商品上架：</span>
                <div class="switch2">
                    <div class="switch">
                    <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-3"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-1"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-8" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-8" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
            </div>
            <div class="p8">
                <span class="s5">预告商品：</span>
                <div class="switch2">
                    <div class="switch">
                    <input id="cmn-toggle-10" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-10"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-9" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-9"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-11" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-11" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
            </div>
            <div class="p9">
                <span class="s5">详细页标题：</span>
                <input type="text" class="t2" value=""/> 
            </div>
            <div class="p10">
                <span class="s5">详细页描述：</span>
                <input type="text" class="t2" value=""/> 
            </div>
            <div class="p11">
                <span class="s5">商品关键字：</span>
                <input type="text" class="t2" value=""/> 
            </div>
            <div class="p12">
                <span class="s5">优惠方式：</span>
                <input type="text" placeholder="请选择" class="t1" list="l1"> 
                <datalist id="l1">
                    <option>无优惠</option>
                    <option>特惠促销</option>
                    <option>会员价格</option>
                    <option>满减价格</option>
                </datalist>
            </div>
            <input type="button" value="上一步，填写商品信息" class="b1" onclick="jiaxiang('添加商品1.html')">
    
     </div>

</body>
</html>